<!--
 * @Author: Wangtao
 * @Date: 2020-10-16 15:00:42
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-27 13:57:57
-->
<!--titleArr: ['aaa', 'bbb', 'ccc']-->
<!--例子：<breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>-->
<template>
  <div
    class="breadCrumb"
    :style="{
      fontSize: fontSize + 'px',
      boxShadow: isShowShadow ? '0px 1px 4px 0px #E0E6F0' : '0px',
      padding: isShowShadow ? '21px 24px' : '21px 0px'
    }"
  >
    <GoBack :back="back" back-title="IVR语音导航" title="编辑IVR语音导航" />
  </div>
</template>
<script setup lang="ts">
import { defineProps, withDefaults, defineEmits } from 'vue'
import GoBack from '@/common/components/go-back.vue'
const { isShowShadow, fontSize } = withDefaults(
  defineProps<{
    fontSize: number
    isShowShadow: boolean
    isClickTitleBack: boolean
    titleArr: any
  }>(),
  {
    fontSize: 14,
    isShowShadow: true,
    isClickTitleBack: true
  }
)

const emits = defineEmits<{
  (event: 'back'): void
}>()

const back = () => {
  emits('back')
}
</script>
<style lang="stylus" scoped>
.breadCrumb
  display: flex;
  font-size: 14px;
  align-items: center;
  line-height: 14px;
  width: 100%;
  box-sizing: border-box;
  height: 56px;
  background: #fff;
  padding-left: 0 !important;
  .icon
    color $c-main
    display inline-block
    width 18px
    height 18px
    line-height 18px
    border 1px solid $c-main
    border-radius 50%
    text-align center
  .el-icon-arrow-left
    font-size 12px
    margin-right 10px
  .margin-r
    color #767E91
    margin-right 7px
  .last,.onlyOne
    font-weight bold
  .other
    color $fc-gray2
  .back
    color #767E91
    cursor pointer
    .V7_iconfont
      color #B3B9C7
      margin-right 8px
      font-size 14px
  .back:hover
    color $c-main
  .onlyOne
    color $cf-gray
  .last
    color #303753
  .V7_iconV7tubiao_mianfanhui
    font-size 14px
</style>
